<template>
  <div>
    <a-popover placement="bottom" trigger="click" v-model="showSeason">
      <template slot="content">
        <div class="popover_content">
          <div class="ant-calendar-month-panel-header">
            <i aria-label="前一年" class="ant-calendar-month-panel-prev-year-btn" @click="prev" />
            <span role="button" class="ant-calendar-month-panel-year-select">{{ year }}年</span>
            <i aria-label="后一年" @click="next" class="ant-calendar-month-panel-next-year-btn" />
          </div>

          <div class="a-picker-panel__content">
            <table class="el-month-table">
              <tr>
                <td :class="{ today: currentQuarter === 1 }">
                  <div>
                    <a class="cell" @click="selectSeason(1)">上半年</a>
                  </div>
                </td>
               
              </tr>
              <tr>
                <td :class="{ today: currentQuarter === 2 }">
                  <div>
                    <a class="cell" @click="selectSeason(2)">下半年</a>
                  </div>
                </td>
               
              </tr>
            </table>
          </div>
        </div>
      </template>
      <div class="popover_input">
        <a-input slot="reference" placeholder="请选择季度" v-model="strValue" style="width: 12rem" prefix-icon="el-icon-date">
          <a-icon slot="prefix" type="calendar" />
        </a-input>
      </div>
    </a-popover>
  </div>
</template>

<script>
export default {
  model: {
    prop: "quarterValue",
    event: "quarterChange",
  },
  props: {
    quarterValue: "",
    resetvalue: "",
  },

  data () {
    return {
      showSeason: false,
      year: new Date().getFullYear(),
      strValue: "",
      currentQuarter: 1,
    };
  },

  watch: {
    strValue (val) {
      if (!val) {
        this.currentQuarter = this.$moment().quarter();
        this.selectSeason()
      }
    },
  },

  mounted () {
    this.currentQuarter = this.$moment().quarter();
    const cnNum = ["一", "二"];
    this.strValue = `${this.year}年${cnNum[this.currentQuarter - 1] == '一'? '上半年': '下半年'}`;
  },

  methods: {
    resetfn () {
      this.strValue = "";
    },
    prev () {
      this.year = this.year * 1 - 1;
    },

    next () {
      this.year = this.year * 1 + 1;
    },

    selectSeason (i) {
      this.showSeason = false
      let season = {
        year: i ? this.year : null,
        sortIndex: i ? i : null,
      };
      this.currentQuarter = i ? i : this.currentQuarter
      this.$emit("quarterChange", season);
      const cnNum = ["一", "二"];
      this.strValue = i ? `${this.year}年${cnNum[i - 1] == '一'? '上半年': '下半年'}` : '';
    },
  },
};
</script>
<style lang="less" scoped>
/** lang='less' scoped */

.popover_input {
  display: inline-block;
  width: 200px;
  padding: 0px 5px;
}

.quarter-popover-custom {
  padding: 0;
  width: 12rem !important;
}
.mask-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 999;
}

.season-picker-box {
  margin-bottom: 0;
  border-bottom: 1px solid #ebeef5;
}

.popover_content {
  width: 200px;
}

.el-month-table {
  width: 100%;
}

.el-month-table td {
  width: 50%;
  height: 60px;
  text-align: center;
}

.el-month-table td.today .cell {
  color: #fff;
  background: #3b5998;
}

.el-month-table td .cell {
  border: 5px;
  height: 25px;
  line-height: 25px;
  display: inline-block;
  padding: 0 8px;
}

.el-month-table td .cell:hover {
  color: #fff;
  background: #3b5998;
}

.btn_width {
  width: 200px;
}

.box-card {
  width: 240px;
  padding: 0 3px;
  margin-top: 10px;
  position: fixed;
  z-index: 9999;

  .item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .a-button {
      width: 80px;
      margin: 5px;
      color: #606266;
      &:hover {
        color: #3498db;
      }
    }
  }
}
</style>
